<script setup lang="ts">
import type { FormItemProps } from "../utils/types";
import { http } from "@/utils/http";
import { changeHttpLink } from "@/utils/test";
import { message } from "@/utils/message";

const props = defineProps<FormItemProps>();
const emit = defineEmits(["success"]);

const formRef = ref();
const form = ref<{
  id?: number;
  channelId?: number;
  channelName?: string;
  userId?: number;
  userName?: string;
  priority?: number;
  [key: string]: any;
}>({});

// 表单规则
const rules = {
  channelId: [
    {
      required: true,
      message: "请选择频道",
      trigger: "blur"
    }
  ],
  userId: [
    {
      required: true,
      message: "请选择用户",
      trigger: "blur"
    }
  ],
  priority: [
    {
      required: true,
      message: "请输入优先级",
      trigger: "blur"
    },
    {
      type: "number",
      message: "优先级必须是数字",
      trigger: "blur"
    },
    {
      min: 1,
      max: 10,
      message: "优先级必须在1-10之间",
      trigger: "blur"
    }
  ]
};

// 频道列表
const channelOptions = ref([]);
// 用户列表
const userOptions = ref([]);

watch(
  () => props.form,
  val => {
    form.value = { ...val };
  },
  {
    immediate: true
  }
);

// 加载频道数据
function loadChannels() {
  http
    .post(changeHttpLink("index.php/channel/channel/list"), {
      data: {}
    })
    .then((res: any) => {
      if (res.Success) {
        channelOptions.value = res.Data.Items;
      } else {
        message(res.Message, { type: "error" });
      }
    })
    .catch(err => {
      message(err.message, { type: "error" });
    });
}

// 加载用户数据
function loadUsers() {
  http
    .post(changeHttpLink("index.php/user/user/list"), {
      data: {}
    })
    .then((res: any) => {
      if (res.Success) {
        userOptions.value = res.Data.Items;
      } else {
        message(res.Message, { type: "error" });
      }
    })
    .catch(err => {
      message(err.message, { type: "error" });
    });
}

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = { ...form.value };
      const url =
        props.type === "新增"
          ? "index.php/channelMembers/channelMembers/add"
          : "index.php/channelMembers/channelMembers/update";

      http
        .post(changeHttpLink(url), {
          data: params
        })
        .then((res: any) => {
          if (res.Success) {
            message(`${props.type}频道成员成功`, { type: "success" });
            emit("success");
          } else {
            message(res.Message, { type: "error" });
          }
        })
        .catch(err => {
          message(err.message, { type: "error" });
        });
    }
  });
}

// 加载数据
loadChannels();
loadUsers();
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item v-if="props.type === '修改'" label="ID" prop="id">
      <el-input v-model="form.id" placeholder="ID" disabled />
    </el-form-item>
    <el-form-item label="频道" prop="channelId">
      <el-select
        v-model="form.channelId"
        placeholder="请选择频道"
        :disabled="props.type === '修改'"
      >
        <el-option
          v-for="item in channelOptions"
          :key="item.id"
          :label="item.channelName"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="用户" prop="userId">
      <el-select
        v-model="form.userId"
        placeholder="请选择用户"
        :disabled="props.type === '修改'"
      >
        <el-option
          v-for="item in userOptions"
          :key="item.id"
          :label="item.userName"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="优先级" prop="priority">
      <el-input
        v-model="form.priority"
        placeholder="请输入优先级(1-10)"
        type="number"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 确定 </el-button>
      <el-button @click="formRef.value.resetFields()"> 重置 </el-button>
    </el-form-item>
  </el-form>
</template>
